<template>
  <div class="app-content flex flex-col h-full">
    <!-- 列表查询组件 -->
    <el-form inline class="crud-search-form" v-permissions="['system:menu:query']">
      <el-form-item label="菜单名称">
        <el-input v-model="queryParams.title" placeholder="请输入菜单名称"></el-input>
      </el-form-item>
      <el-form-item label="菜单状态">
        <el-select v-model="queryParams.status" placeholder="请选择菜单状态">
          <el-option label="启用" :value="1"></el-option>
          <el-option label="停用" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <ep-button plain svg-icon="Refresh" type="danger" @click="resetQuery">重置</ep-button>
        <ep-button plain svg-icon="Search" type="primary" @click="handleQuery">查询</ep-button>
      </el-form-item>
    </el-form>

    <div class="mb-16px">
      <ep-button svg-icon="Plus" type="primary" plain @click="handleCreate()" v-permissions="['system:menu:create']">新增</ep-button>
      <ep-button svg-icon="Sort" type="info" plain @click="toggleExpandAll">展开/折叠</ep-button>
    </div>

    <el-table :data="list" row-key="id" :default-expand-all="isExpandAll" v-if="refreshTable" class="crud-table" show-overflow-tooltip>
      <el-table-column label="菜单名称" prop="title" min-width="160"></el-table-column>
      <el-table-column align="center" label="菜单类型" prop="title" min-width="150">
        <template #default="{ row }">
          <el-tag v-if="row.type === 'M'" type="primary">目录</el-tag>
          <el-tag v-if="row.type === 'C'" type="warning">菜单</el-tag>
          <el-tag v-if="row.type === 'F'" type="success">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="图标" min-width="60">
        <template #default="{ row }">
          <SvgIcon :name="row.icon" v-if="row.icon" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="显示顺序" prop="order" min-width="90"></el-table-column>
      <el-table-column align="center" label="权限标识" prop="permission" min-width="160"></el-table-column>
      <el-table-column align="center" label="路由地址" prop="path" min-width="180"></el-table-column>
      <el-table-column align="center" label="页面地址" prop="component" min-width="200"></el-table-column>
      <el-table-column align="center" label="菜单状态" min-width="90">
        <template #default="{ row }">
          <el-tag v-if="row.status === 0" type="danger">停用</el-tag>
          <el-tag v-if="row.status === 1">正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否隐藏" min-width="90">
        <template #default="{ row }">
          <el-tag v-if="row.visible === 0" type="danger">隐藏</el-tag>
          <el-tag v-if="row.visible === 1">显示</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="最近更新" prop="updateTime" min-width="170"></el-table-column>
      <el-table-column align="center" label="操作" min-width="150" fixed="right">
        <template #default="{ row }">
          <el-link type="primary" @click="handleCreate(row)" v-permissions="['system:menu:create']">新增</el-link>
          <el-divider direction="vertical" v-permissions="['system:menu:create']" />
          <el-link type="warning" @click="handleUpdate(row)" v-permissions="['system:menu:update']">编辑</el-link>
          <el-divider direction="vertical" v-permissions="['system:menu:update']" />
          <el-link type="danger" @click="handleDelete(row)" v-permissions="['system:menu:delete']">删除</el-link>
        </template>
      </el-table-column>
    </el-table>

    <MenuActionDialog ref="menuActionDialogRef" @getList="getList" />
  </div>
</template>

<script setup lang="ts">
import { TipModal, transformListToTree } from '@/utils'
import { MenuRequest } from '@/api/system/menu.request'
import MenuActionDialog from './MenuActionDialog.vue'

const loading = ref<boolean>(false)
const menuActionDialogRef = ref<InstanceType<typeof MenuActionDialog>>()
/** 是否展开，默认全部折叠 */
const isExpandAll = ref<boolean>(false)
/** 重新渲染表格状态 */
const refreshTable = ref<boolean>(true)
const list = ref<MenuType.TreeEntity[]>([])
const queryParams = ref<Partial<MenuType.Entity>>({})

async function getList() {
  try {
    loading.value = true
    const records = await MenuRequest.findList(queryParams.value)
    list.value = transformListToTree(records)
    loading.value = false
  } catch (error) {
    loading.value = false
  }
}

function resetQuery() {
  queryParams.value = {}
  handleQuery()
}

function handleQuery() {
  getList()
}

function handleCreate(menu?: MenuType.Entity) {
  menuActionDialogRef.value?.open(menu)
}

function handleUpdate(menu: MenuType.Entity) {
  menuActionDialogRef.value?.update(menu.id)
}

async function handleDelete(record: MenuType.Entity) {
  const { cancel } = await TipModal.confirm(`确定要删除《${record.title}》吗？`)
  if (cancel) return TipModal.msg(`操作取消`)
  await MenuRequest.deleteOneById({ menuId: record.id })
  TipModal.msgSuccess(`删除成功`)
  getList()
}

function toggleExpandAll() {
  refreshTable.value = false
  isExpandAll.value = !isExpandAll.value
  nextTick(() => (refreshTable.value = true))
}

onBeforeMount(() => {
  getList()
})
</script>

<style lang="scss" scoped>
/* 表单顶部的搜索框 */
.crud-search-form {
  --search-form-item-width: 160px;
  .el-input {
    --el-input-width: var(--search-form-item-width);
  }
  .el-select {
    --el-select-width: var(--search-form-item-width);
  }
  .el-button {
    width: 81px;
  }
}
</style>
